let id = 0
let start_btn = document.querySelector('.start-btn')
let stop_btn = document.querySelector('.stop-btn')
let list = document.querySelectorAll('.box>ul>li')
let index = 0
// 点击开始按钮
start_btn.onclick = function () {
  // 清空定时器
  if (id) {
    clearInterval(id)
  }
  // 启动定时器
  id = setInterval(function () {
    // li元素下标增加1
    index++
    // 如果到第8个元素下标时，重置下标为0
    if (index > 7) {
      index = 0
    }
    // 遍历所有的li元素
    for (let i = 0; i < list.length; i++) {
      // 先清空所有元素的class
      list[i].className = ''
      // 如果index和元素下标相对，说明此时的i就是要激活的下标
      if (i === index) {
        // 设置i下标元素为激活状态
        list[i].className = 'active'
      }
    }
  }, 50)
}

// 点击停止安钮
stop_btn.onclick = function () {
  // 清空定时器
  if (id) {
    clearInterval(id)
  }
  // 弹出当前选中的优惠券
  alert(list[index].innerHTML)
}
